<template>
  <!-- <form-designer ref="formDesigner"></form-designer> -->
  <div>
    <el-container class="form-container" style="">
            <el-card class="box-card" shadow="never">
                <div slot="header" class="clearfix">
                    <span>模板信息</span>
                    <el-button type="primary" size="mini" style="float:right;padding: 6px 9px;margin-left:10px" @click="handlerEdit">编辑</el-button>
                    <el-button type="primary" size="mini" style="float:right;padding: 6px 9px;" @click="handlerDataMapping">数据映射</el-button>
                </div>
                <div >
                   <el-form  :rules="rules"  ref="form"   :model="form" size="small" label-width="120px">
                    <el-tabs v-model="activeTab" type="border-card" @tab-click="handlerClickTab">
                    <el-tab-pane label="基本信息" name="base" >
                      <el-row>
                        <el-col :span="24">
                          <el-form-item  label="模板名称"  prop="fdName">
                            {{form.fdName}}
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="8">
                          <el-form-item  label="分类名称"   prop="fdCategoryName">
                            {{form.fdCategoryName}}
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item  label="创建人"   prop="fdCreatorName">
                            {{form.fdCreatorName}}
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item  label="创建时间"   prop="fdCreateTime">
                            {{form.fdCreateTime}}
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="表单" name="form">
                      <form-builder :buildData="form.fdForm" v-if="itemList.length>0" disabled/>
                    </el-tab-pane>
                    <el-tab-pane label="历史版本" name="history" >
                      <el-table
                        :data="historyList"
                        stripe
                        style="width: 100%">
                        <el-table-column
                          prop="fdVersion"
                          label="版本"
                          width="">
                        </el-table-column>
                        <el-table-column
                          prop="fdCreateTime"
                          label="日期"
                          width="180">
                        </el-table-column>
                        <el-table-column
                          label="查看"
                          width="180">
                          <template slot-scope="scope">
                            <el-button @click="handleHisTemplateView(scope.row)" type="text" size="small">查看</el-button>
                            <el-button @click="handleHisTemplatesetBack(scope.row)" type="text" size="small">还原</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-tab-pane>
                  </el-tabs>
                   </el-form>
                </div>
            </el-card>
        </el-container>
        <el-dialog title="查看历史模板"
          :visible.sync="dialogVisible"
          :fullscreen="true"
          center
          :show-close="false"
          >
          <form-builder :buildData="historyBuildData" v-if="historyBuildData.length>0" disabled/>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handlerClose">关闭</el-button>
          </span>
        </el-dialog>
        <fancy-data-mapping
          v-model="form.fdMappingId"
          :templateData="form.fdForm"
          :modelName="modelName"
          :modelId="form.fdId"
          :visible.sync="dataMappingVisible"
          @success="handlerSuccess"
        />
    </div>
</template>

<script>
import FancyDataMapping from '@/components/page/sys/db/components/FancyDataMapping'
import formUtils from '@/utils/formUtils';
import dateUtils from '@/utils/dateUtils';
//import {base64_encrypt,base64_decrypt} from '@/utils/secret';
export default {
  name:'SysFormTemplateView',
  data() {
    return{
      form: {
        fdId:'',
        fdName: '',
        fdForm:'',
        fdCategoryId:'',
        fdCategoryName:'',
        fdCreatorName:'',
        fdCreateTime:'',
        fdMappingId:''
      },
      rules:{
      },
      activeTab:'base',
      modelName:'com.fancy.application.sys.form.entity.SysFormMain',
      historyList:[],
      dialogVisible:false,
      historyBuildData:'',
      dataMappingVisible:false
    }
  },
  components:{
    FancyDataMapping
  },
  created() {
    this.initParam();
  },
  methods: {
    handlerEdit() {
        const params = {
            path: "/sys/form/sys_form_template/edit",
            query: {id:this.form.fdId}
        }
        this.$router.push(params);
    },
    initParam() {
      let fdId = this.$route.query.id;
      if(formUtils.isNotEmpty(fdId)){
        this.fullscreenLoading = true;
        this.$fetch('/api/sys/form/sys_form_template',{
          id:fdId
        }).then((res) => {
          formUtils.convertToForm(res.data,this.form);
          this.form.fdCreateTime = dateUtils.format(this.form.fdCreateTime);
          this.fullscreenLoading = false;
        });
      }
    },
    handlerDataMapping(){
      this.dataMappingVisible = true;
      //this.$router.push({ name: 'home', params: { userId: wise }})
    },
    handlerClickTab(tab){
      if(tab.name === 'history'&& this.historyList.length == 0){
        let fdId = this.$route.query.id;
        this.$fetch('/api/sys/form/sys_form_template_history/listAll',{
          fdId:fdId
        }).then((res) => {
          if(res.status === 1){
            res.data.forEach(v =>{
              const history = {};
              history.fdId = v.fdId;
              history.fdVersion = v.fdVersion;
              history.fdMainId = v.fdMainId;
              history.fdForm = v.fdForm;
              history.fdCreateTime = dateUtils.format(v.fdCreateTime);
              this.historyList.push(history);
            })
          }
        });
      }
    },
    handleHisTemplateView(row) {
      this.dialogVisible = true;
      this.historyBuildData = row.fdForm;
    },
    handlerClose(){
      this.dialogVisible = false
      this.historyBuildData = '';
    },
    
    handleHisTemplatesetBack(row){
      this.$confirm('此操作将覆盖当前模板, 是否继续?').then(() => {
        this.$put('/api/sys/form/sys_form_template/updateTemplate',{
          fdId:row.fdMainId,
          fdForm:row.fdForm,
        }).then((res) => {
          if(res.status === 1){
            this.$message({
              message: '数据还原成功！',
              type: 'success',
              onClose:function(){
                history.go(0);
              }
            });
          }
        });
      })
    },
    handlerSuccess(val){
      this.$put('/api/sys/form/sys_form_template/updateMappingId',{
        fdId:this.form.fdId,
        fdMappingId:val
      })
    }
  },
  computed:{
    itemList(){
      if(this.form.fdForm!==''){
        const form = JSON.parse(this.form.fdForm);
        return form.list;
      }else{
        return [];
      }
    }
  }
}
</script>

<style scoped>
.container{
  width: 100%;
}
.breadcrumb{
  height:15px;
  margin-top:45px;
  margin-bottom: 10px;
}
.el-tabs--border-card .el-tabs__content{
  padding: 0px;
}
</style>